<template>
    <div class="bg">
        <ElCarousel :height="carouselH" arrow="never" :interval="6000">
            <ElCarouselItem>
                <img src="@/assets/login/login_t1.png" />
                <div class="banner banner1">
                    <img src="@/assets/login/banner1/img02.png" class="img1" />
                    <img src="@/assets/login/banner1/img03.png" class="img2" />
                </div>
            </ElCarouselItem>
            <ElCarouselItem>
                <img src="@/assets/login/login_t2.png" />
                <div class="banner banner2">
                    <img src="@/assets/login/banner2/img02-logo.png" class="img1" />
                    <img src="@/assets/login/banner2/img03.png" class="img2" />
                    <img src="@/assets/login/banner2/img04.png" class="img3" />
                </div>
            </ElCarouselItem>
            <ElCarouselItem>
                <img src="@/assets/login/login_t3.png" />
                <div class="banner banner3">
                    <img src="@/assets/login/banner3/img04.png" class="img1" />
                </div>
            </ElCarouselItem>
        </ElCarousel>
    </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue';

import { ElCarousel, ElCarouselItem } from 'element-plus';

const carouselH = ref('');

const setHeight = () => {
    carouselH.value = '580px';
};

// 初始化设置跑马灯高度
onMounted(() => {
    setHeight();
});
</script>

<style lang="scss" scoped>
// 背景
.bg {
  padding: 175px 0 0 97px;
  width: 78%;
  .banner {
    width: 532px;
    height: 439px;
    position: relative;
    margin-top: 20px;
  }
  .banner1 {
    background: url("@/assets/login/banner1/img01.png") no-repeat;
    background-size: 100% 100%;
    .img1 {
      width: 24px;
      height: 30px;
      position: absolute;
      right: 26px;
      bottom: 135px;
      animation: animate1 2.5s 0.5s infinite alternate;
    }
    .img2 {
      width: 24px;
      height: 30px;
      position: absolute;
      left: 15px;
      top: 178px;
      animation: animate1 3s 0.2s infinite alternate forwards;
    }
  }
  .banner2 {
    background: url("@/assets/login/banner2/img02.png") no-repeat;
    background-size: 100% 100%;
    .img1 {
      width: 72px;
      height: 76px;
      position: absolute;
      left: 213px;
      top: 100px;
      animation: animate1 3s 0.5s infinite alternate;
    }
    .img2 {
      width: 43px;
      height: 15px;
      position: absolute;
      top: 52px;
      left: 37px;
      animation: animate2 2s 0.5s infinite alternate;
    }
    .img3 {
      width: 41px;
      height: 19px;
      position: absolute;
      top: 74px;
      left: 50px;
      animation: animate3 3s 0.5s infinite alternate;
    }
  }
  .banner3 {
    background: url("@/assets/login/banner3/img03.png") no-repeat;
    background-size: 100% 100%;
    .img1 {
      position: absolute;
      left: 121px;
      top: 64px;
      width: 96px;
      height: 96px;
      animation: animate4 2.5s 0.5s infinite alternate;
    }
  }
  ::v-deep(.el-carousel__button) {
    width: 15px;
    height: 15px;
    border-radius: 50%;
  }
  ::v-deep(.el-carousel__indicators--horizontal) {
    left: 195px;
    transform: translate(8px, -30px);
    li:not(last-child) {
        margin-right: 30px;
    }
  }
}
// banner
@keyframes animate1 {
  25% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

@keyframes animate2 {
  25% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-12px);
  }
}
@keyframes animate3 {
  25% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-10px, 18px);
  }
}

@keyframes animate4 {
  25% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 10px);
  }
}
</style>
